<style media="screen">
    div{
        background: red;
        float: left;
        margin-left: 10px;
        /*transition: transform 0.5s;*/
        box-shadow:0px 0px 2px 2px black;
    }

    div[size=s]{
        width: 100px;
        height: 100px;
    }

    div[size=m]{
        width: 150px;
        height: 150px;
    }

    div[size=l]{
        width: 200px;
        height: 200px;
    }
</style>
<div class="lala" size="s">123</div>
<div class="lala" size="m">123</div>
<div class="lala" size="l">123</div>
<div class="lala" size="s">123</div>
<div class="lala" size="m">123</div>
<div class="lala" size="l">123</div>
<div class="lala" size="s">123</div>
<div class="lala" size="m">123</div>
<div class="lala" size="l">123</div>
<div class="lala" size="s">123</div>
<div class="lala" size="m">123</div>
<div class="lala" size="l">123</div>
<div class="lala" size="s">123</div>
<div class="lala" size="m">123</div>
<div class="lala" size="l">123</div>
<script charset="utf-8">
    let rotateRange = 15;
    let shadowRange = 5;

    let boxs = document.getElementsByClassName('lala');
    boxs = Array.from(boxs);
    boxs.forEach( box => {
        box.addEventListener('mousemove',function(e){
            let rect = this.getBoundingClientRect();
            let height = rect.height;
            let width = rect.width;
            let cx = e.x - rect.left;
            let cy = e.y - rect.top;
            this.style.transform=`rotateX(${((cy/height)*2-1)*rotateRange}deg) rotateY(${-((cx/width)*2-1)*rotateRange}deg)`;
            this.style.boxShadow=`${-((cx/width)*2-1)*shadowRange}px ${-((cy/height)*2-1)*shadowRange}px 2px 2px black`;
        });

        box.addEventListener('mouseleave',function(e){
            this.style.transform="";
            this.style.boxShadow="";
        });
    });




</script>
